<template>
  <view class="out">
    <input type="text" v-model="firstName" placeholder="First Name" />
    <input type="text" v-model="lastName" placeholder="Last Name" />
    <view>全称：{{ fullName }}</view>
  </view>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";
const firstName = ref("");
const lastName = ref("");

const fullName = ref("");
// watch([firstName, lastName], ([first, last]) => {
//   fullName.value = first + " " + last;
// });
watchEffect(() => {
  console.log(firstName.value, lastName.value);
});
</script>

<style lang="scss">
.out {
  padding: 20px;
  input {
    border: 1px solid #ccc;
    height: 40px;
    padding: 0 10px;
    margin: 10px 0;
  }
}
</style>
